<template>
  <div id="exchangeList">
    <li v-for="(products,index) in productsList" :key="products.productId">
      <!-- <el-row :gutter="10">
        <el-col
          :xs="12"
          :sm="8"
          :md="8"
          :lg="6"
          :xl="6"
        > -->
          <p class="pic">
            <img :src="'/api/upload/' + products.productImg" alt />
          </p>
          <p class="mc">{{products.productName}}</p>
          <p class="p3">
            <span class="p3_l">
              <span class="red">{{products.productPoint}}</span>积分
            </span>
            <span class="p3_r">
              <el-button :style="selfstyle" type="text" @click="open(index)" class="click_change">点击兑换</el-button>
            </span>
          </p>
        <!-- </el-col>
      </el-row> -->
    </li>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: [],
      productsList: [],
      selfstyle: {
        color: "white",
        background: "#e6a23c",
        padding: "10px"
      }
    };
  },
  created() {
    this.$axios
      .get("/api/users/changeProduct", {
        params: { productId: this.queryId }
      })
      .then(res => {
        console.log("res:", res.data.data);
        this.productsList = res.data.data;
      })
      .catch(err => {
        console.log("err:", err);
      });
    //获取用户信息
    this.$axios
      .get("/api/users/getUserInfo")
      .then(res => {
        this.user = res.data.data;
        console.log("getUserInfo-list", this.user[0].userPoint);
      })
      .catch(err => {
        console.log("err:", err);
      });
  },
  methods: {
    open(i) {
      console.log("xxxx", this.productsList[i].productPoint);

      const h = this.$createElement;
      this.$msgbox({
        title: "消息",
        message: h("p", null, [
          h("span", null, "确认要兑换： "),
          h("i", { style: "color: red" }, this.productsList[i].productName)
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 1000);
          } else {
            done();
          }
        }
      }).then(action => {
        if (this.user[0].userPoint >= this.productsList[i].productPoint) {
          this.$message({
            type: "success",
            message: "恭喜你，兑换成功"
          });
        } else {
          this.$message({
            type: "error",
            message: "积分不足，兑换失败"
          });
        }
      });
    }
  }
};
</script>
<style lang="css" scoped>
@import "../css/exchange.css";
</style>
<style lang="scss">
.el-button--primary {
  border-color: #e6a23c;
  background-color: #e6a23c;
}
.el-message-box__message i {
  color: #e6a23c;
}
</style>